<!--轮播表格-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <PnScrollBoard :config="config" :style="{
      width: (layoutItem.layoutItemConfigData.width - 2) + 'px',
      height: (layoutItem.layoutItemConfigData.height -2) + 'px'
    }" @click="rowClickHandle"/>

  </div>
</template>

<script>
  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'
  import RollTableComp from './RollTableComp'

  const _this = {
    name: 'RollTableComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '3.0',
      configDataTemp: Object.assign({

        header: ['ID', '地区', '数量'],
        rowNum: 5,
        showHeader: true,
        headerBGC: '#00BAFF',
        headerTextColor: '#fff',
        headerFontSize: 14,
        oddRowBGC: '#003B51',
        evenRowBGC: '#0A2732',
        waitTime: 2000,
        headerHeight: 35,
        index: false,
        indexHeader: '#',
        carousel: 'single',

        columnWidth: [],
        align: [],

        rowClickHandleScript: '',

        indexStyle: {
          width: 50,
          align: 'center'
        },
        columnMapping: [
          RollTableComp.buildColumnMappingItem('id', 'ID'),
          RollTableComp.buildColumnMappingItem('name', '地区'),
          RollTableComp.buildColumnMappingItem('num', '数量')
        ]

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [],
        ds_resultObj: [
          {id: '1', name: '广西', num: 1234},
          {id: '2', name: '广东', num: 533},
          {id: '3', name: '香港', num: 4855},
          {id: '4', name: '澳门', num: 4214},
          {id: '5', name: '江西', num: 1123},
          {id: '6', name: '浙江', num: 5455},
          {id: '7', name: '上海', num: 6955},
          {id: '8', name: '江苏', num: 4585},
          {id: '9', name: '湖北', num: 4884},
          {id: '10', name: '北京', num: 6654},
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })

    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      rowClickHandle(params) {
        eval(this.component.compConfigData.rowClickHandleScript)
      }
    },
    computed: {
      config() {
        let resultObj = this.runCustomFilter(this.component.compConfigData.ds_resultObj);

        let headerArr = [];
        let dataArr = [];
        let columnWidthArr = [];
        let alignArr = []

        // 判断columnMapping是否存在并且长度不为0
        if (this.component.compConfigData.columnMapping) {
          let dataArrItem = []
          resultObj.forEach(resultObjItem => {
            this.component.compConfigData.columnMapping.forEach((columnMappingItem, index) => {
              dataArrItem.push(resultObjItem[columnMappingItem.columnField])
            })
            dataArr.push(dataArrItem);
            dataArrItem = []
          })

          // 如果配置了显示行号
          if (this.component.compConfigData.index) {
            columnWidthArr.push(this.component.compConfigData.indexStyle ? this.component.compConfigData.indexStyle.width : 60);
            alignArr.push(this.component.compConfigData.indexStyle ? this.component.compConfigData.indexStyle.align : 'center')
          }
          this.component.compConfigData.columnMapping.forEach((columnMappingItem, index) => {
            headerArr.push(columnMappingItem.columnName);
            // 判断列宽度是否不设为0
            if (columnMappingItem.columnWidth != 0) {
              columnWidthArr.push(columnMappingItem.columnWidth)
            }
            alignArr.push(columnMappingItem.textAlign)
          })
        }else {
          resultObj.forEach(item => {
            let tmpArr = [];
            for (let i in item) {
              tmpArr.push(item[i])
            }
            dataArr.push(tmpArr)
          });
        }

        return {
          header: headerArr,
          data: dataArr,
          rowNum: this.component.compConfigData.rowNum,
          showHeader: this.component.compConfigData.showHeader,
          headerBGC: this.component.compConfigData.headerBGC,
          headerTextColor: this.component.compConfigData.headerTextColor,
          headerFontSize: this.component.compConfigData.headerFontSize ? this.component.compConfigData.headerFontSize : 14,
          oddRowBGC: this.component.compConfigData.oddRowBGC,
          evenRowBGC: this.component.compConfigData.evenRowBGC,
          waitTime: this.component.compConfigData.waitTime,
          headerHeight: this.component.compConfigData.headerHeight,
          index: this.component.compConfigData.index,
          indexHeader: this.component.compConfigData.indexHeader,
          carousel: this.component.compConfigData.carousel,
          columnWidth: columnWidthArr,
          align: alignArr,
          columnMapping: this.component.compConfigData.columnMapping
        }
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
